
import Layout from '../core/Layout'
import { Col, Menu, Row } from 'antd';
import { Link } from 'react-router-dom'
import {AppstoreOutlined, UserAddOutlined, BarsOutlined } from '@ant-design/icons'
import { Descriptions } from 'antd'
import { isAuth } from '../../helpers/auth'
import { Typography } from 'antd'
const { Title } = Typography


function AdminDashboard() {
  // 解构用户信息
  const { user: {name, email} } = isAuth()
  // 左侧
  const adminLeft = () => (
    <>
      <Title level={5}>管理员导航</Title>
      <Menu>
      <Menu.Item key='fenlei'>
        <AppstoreOutlined />
        <Link to='/add/category'>创建分类</Link>
      </Menu.Item>
      <Menu.Item key='shangpin'>
        <UserAddOutlined />
        <Link to='/add/product'>创建商品</Link></Menu.Item>
      <Menu.Item key='liebiao'>
        <BarsOutlined />
        <Link to='/admin/order'>订单列表</Link></Menu.Item>
      </Menu>
    </>
  )
  // 右侧
  const adminRight = () => (
    <Descriptions title="管理员信息" bordered>
      <Descriptions.Item label="昵称">{name}</Descriptions.Item>
      <Descriptions.Item label="邮箱">{email}</Descriptions.Item>
      <Descriptions.Item label="角色">管理员</Descriptions.Item>
    </Descriptions>
  )
  return (
    <Layout title='管理员 dashboard'>
      <Row>
      <Col span={4}>{adminLeft()}</Col>
      <Col span={20}>{adminRight()}</Col>
      </Row>
    </Layout>
  )
}

export default AdminDashboard
